<template>
	<view class="content">
		<pagehead :title="title" :titlecolor='titlecolor' :isback='isback'></pagehead>
		<view class='login-info'>
			<iconInput v-for="(item,index) in iconInputList" :iconsrc="item.iconsrc"
				:placeholdertext="item.placeholdertext" :isgetcode='item.isgetcode' :ref='item.name'></iconInput>
			<view class='agreement'>
				<image class='check' :src="checkimg" @click="agreechange"></image>
				<text class='tips'>注册即表示接受<text>《版权声明》</text>和<text>《隐私保护》</text></text>
			</view>
		</view>
		<view class='bottom-button'>
			<view class='login'>
				立即注册
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgurl: getApp().globalData.imgurl,
				// 页面标题
				title: '注册',
				titlecolor: 'black',
				isback: true,
				iconInputList: [{
						name: 'phone',
						iconsrc: getApp().globalData.imgurl + 'phone.png',
						placeholdertext: '请输入手机号',
						isgetcode: false
					},
					{
						name: 'password',
						iconsrc: getApp().globalData.imgurl + 'password.png',
						placeholdertext: '请输入密码',
						isgetcode: false
					},
					{
						name: 'passwordagain',
						iconsrc: getApp().globalData.imgurl + 'password.png',
						placeholdertext: '请再输入一次密码',
						isgetcode: false
					},
					{
						name: 'code',
						iconsrc: getApp().globalData.imgurl + 'code.png',
						placeholdertext: '请输入验证码',
						isgetcode: true
					}
				],
				// 是否同意协议
				agree: false,
				// 同意协议图片
				checkimg: getApp().globalData.imgurl + 'unchecked.png'
			}
		},
		onLoad() {

		},
		methods: {
			agreechange() {
				this.agree = !this.agree
				if (this.agree == true) {
					this.checkimg = getApp().globalData.imgurl + 'check.png'
				} else if (this.agree == false) {
					this.checkimg = getApp().globalData.imgurl + 'unchecked.png'
				}
			}
		}
	}
</script>

<style lang='less' scoped>
	.content {
		width: 100vw;
		height: 100vh;
		position: relative;

		.header {
			width: 100vw;
			height: 80rpx;
			position: relative;
			padding: 20rpx 0rpx;

			.back {
				width: 25rpx;
				height: 46rpx;
				position: absolute;
				left: 32rpx;
				top: 36rpx;

			}

			.title {
				display: block;
				color: #212121;
				font-size: 42rpx;
				text-align: center;
				line-height: 80rpx;
			}
		}

		.login-info {
			width: 684rpx;
			margin: 0px auto;
			margin-top: 30rpx;

			.forgot-password {
				display: flex;
				justify-content: flex-end;
				margin-top: 40rpx;

				text {
					color: #666666;
					font-size: 24rpx;
				}
			}
		}

		.agreement {
			width: 684rpx;
			margin: 0px auto;
			margin-top: 40rpx;

			.check {
				width: 30rpx;
				height: 30rpx;
				position: relative;
				top: 5rpx;
			}

			.tips {
				font-size: 22rpx;
				color: #666666;
				line-height: 30rpx;
				margin-left: 20rpx;

				text {
					color: #2F70F1;
				}
			}
		}

		.bottom-button {
			width: 684rpx;
			line-height: 80rpx;
			margin: 0px auto;
			position: absolute;
			bottom: 163rpx;
			left: 50%;
			transform: translateX(-50%);

			.login {
				background-color: #2F70F1;
				border-radius: 40rpx;
				color: #fff;
				text-align: center;
				;
			}

			.register {
				margin-top: 30rpx;
				color: #2F70F1;
				text-align: center;
			}
		}
	}
</style>
